<script setup>
import { ref, reactive, toRefs, nextTick } from 'vue'
// let list = ref([0,1, 2, 3, 4, 5, 6, 7, 8, 9])
let list = reactive([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
import Sortable from 'sortablejs'
import { onMounted, onUpdated } from 'vue'
// const { push, pop } = toRefs(list)

function initSortable () {
  let container = document.getElementById('container')
  let sort = new Sortable(container, {
    //拖拽动画过渡时间
    group: 'name',
    sort: true,
    // onEnd: event => {
    //   // const oldItem = list.value[event.oldIndex]
    //   // console.log(event.oldIndex, event.newIndex)
    //   // console.log(oldItem);
    //   // list.value.splice(event.oldIndex, 1)
    //   // list.value.splice(event.newIndex, 0, oldItem)
    //   console.log(event.clone.dataset["item"]);
    //   const oldItem = list[event.oldIndex]
    //   console.log(event.oldIndex, event.newIndex)
    //   console.log(oldItem);
    //   list.splice(event.oldIndex, 1)
    //   list.splice(event.newIndex, 0, oldItem)
    //   // push(5)
    //   // pop()
    //   console.log(list)
    // }
  })
}
onMounted(() => {
  initSortable()
})
// onUpdated(()=>{
//   console.log("updated");
//   nextTick(()=>{
//     initSortable()
//   })
// })

function handleClick (index,item,event) {
  console.log(index,item);
  list.splice(index, 1)
  list.splice(index, 0, item)
  console.log(event)
}
</script>

<template>
  <div id="container">
    <div class="item" v-for="(item, index) in list" @click="handleClick(index,item,$event)" :data-item="item">
      {{ item }}
    </div>
    <!-- //console.log(list)}" -->
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.item {
  height: 30px;
  width: 100px;
  border: 1px solid pink;
}
</style>
